<template>
    <view :style="themeColor">
        <view class="pay-head">
            <view>待提交审核</view>
        </view>
        <view class="pay-body">
            <view class="pay-time-price">
                <view>提交时间：{{ applyLog.AddTime }}</view>
                <view
                    >充值金额：<text class="moneyicon">¥</text
                    ><text class="strong">{{ userMoneyLog.Money }}</text></view
                >
            </view>
            <view class="pay-way-offline">
                <view class="bank-info">
                    <view class="bank-info-title">请选择收款方式</view>
                    <view class="bank-main">
                        <view class="bank-list" @click="$refs.payWay.open()">
                            <view class="bank-list-name">
                                <image
                                    v-if="accountType == 0"
                                    class="icon-bank"
                                    src="/static/img/bank/ylpay.png"></image>
                                <image
                                    v-if="accountType == 1"
                                    class="icon-bank"
                                    src="/static/img/bank/wxpay.png"></image>
                                <view class="uni-input payname">{{ PayName }}</view>
                            </view>
                            <uni-icons class="icon-right" type="arrowright"></uni-icons>
                        </view>
                        <view class="bank-text" v-show="accountType == 0"
                            ><!--银行卡-->
                            <view>开 户 行：{{ payment.BankTypeName }}{{ payment.Branch }}</view>
                            <view>收款账号：{{ payment.Number }}</view>
                            <view>收 款 人：{{ payment.AccountName }}</view>
                        </view>
                        <view class="bank-text" v-show="accountType == 1"
                            ><!--微信-->
                            <view class="mobilepay">
                                <image
                                    :src="easyGetImgUrl(payment.PayQrUrl)"
                                    mode="widthFix"
                                    :data-src="easyGetImgUrl(payment.PayQrUrl)"
                                    @tap="previewImage1"></image>
                                <text>请使用微信识别二维码完成支付</text>
                            </view>
                        </view>
                        <view class="bank-text" v-if="accountType == 2"
                            ><!--微信-->
                            <view class="mobilepay">
								<image
								    :src="easyGetImgUrl(payment.PayQrUrl)"
								    mode="widthFix"
								    :data-src="easyGetImgUrl(payment.PayQrUrl)"
								    @tap="previewImage1"></image>
                                <text>请使用支付宝识别二维码完成支付</text>
                            </view>
                        </view>
                    </view>
                    <view class="bank-img">
                        <text class="bank-img-title">上传打款凭证</text>
                        <upload-img :imageList="imageList" @chooseImage="chooseImage" @del="del"></upload-img>
                    </view>
                    <view class="flex">
                        <text>备注：</text>
                        <input type="text" placeholder="请填写备注信息" v-model="userMoneyLog.Remark" class="remark" />
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom-bar">
            <button class="btn btn-fill btn-success" @click="pay()">提交</button>
        </view>
        <uni-popup type="bottom" ref="payWay" background-color="#fff" :safe-area="false">
            <view class="pop-pay-way">
                <view class="title"><text>请选择收款方式</text></view>
                <view class="pay-way">
                    <view class="pay-way-item" v-for="item in bankList" @click="select(item)">
                        <image class="pay-icon" :src="getIcon(item.AccountType)"></image>
                        <text v-if="item.AccountType == 0">{{ item.BankTypeName }}{{ item.Branch }}</text>
                        <text v-else>{{ item.AccountTypeName }}</text>
                    </view>
                </view>
                <button class="btn" @click="cancel">取消</button>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import cardGroupCell from "@/components/common/cell/card-group-cell.vue"
import uploadImg from "@/uni-sub-base/components/common/upload-img.vue"
import { GetInitRechargeDetail, submitVoucher } from "@/service/api/member.js"
export default {
    components: {
        cardGroupCell,
        uploadImg,
    },
    data() {
        return {
            id: 0,
            accountType: null,
            PayName: "",
            payWay: 0,
            showBank: null,
            imageList: [],
            array: [],
            arrayindex: 0,
            applyLog: {},
            bankList: [],
            userMoneyLog: {},
            remark: "",
            payment: {},
        }
    },
    onLoad(e) {
        if (e.id) {
            this.id = e.id
        }
    },
    mounted() {
        this.GetInitRechargeDetail()
    },
    methods: {
        pay() {
            let parms = {
                id: this.userMoneyLog.ID,
                payWay: this.userMoneyLog.PayWay,
                payInfo: JSON.stringify(this.payment),
                images: this.imageList.join(","),
                remark: this.userMoneyLog.Remark,
            }
            submitVoucher(parms).then((res) => {
                if (res.State == 1) {
                    this.easyRemoveCurrentGoTo("/pages_me/packet/finance/rechargeRecord")
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
		previewImage1(e) {
		    let PayQrUrl = [this.easyGetImgUrl(this.payment.PayQrUrl)]
		    var current = e.target.dataset.src
		    uni.previewImage({
		        current: current,
		        urls: PayQrUrl,
		    })
		},
        GetInitRechargeDetail() {
            let parms = {
                id: this.id,
                type: 1,
                initBank: true,
            }
            GetInitRechargeDetail(parms).then((res) => {
                if (res.State == 1) {
                    this.applyLog = res.Data.ApplyLog
                    this.bankList = res.Data.BankList
                    this.accountType = res.Data.BankList[0].AccountType
                    this.PayName = res.Data.BankList[0].AccountTypeName
                    this.payment = res.Data.BankList[0]
                    this.userMoneyLog = res.Data.UserMoneyLog
                    if (res.Data.UserMoneyLog.Images) {
                        this.imageList = res.Data.UserMoneyLog.Images.split(",")
                    }
                    if (res.Data.ApplyLog.ApplyMessage == res.Data.UserMoneyLog.Remark) {
                        this.userMoneyLog.Remark = ""
                    }
                }
            })
        },
        //选择图片
        chooseImage(imglist) {
            this.imageList = imglist
        },
        //删除图片
        del(imglist) {
            this.imageList = imglist
        },
        getIcon(id) {
            switch (id) {
                case 0:
                    return "/static/img/bank/ylpay.png"
                    break
                case 1:
                    return "/static/img/bank/wxpay.png"
                    break
                case 2:
                    return "/static/img/bank/zfbpay.png"
                    break
                case 10:
                    return "/static/img/bank/bank.png"
                    break
            }
        },
        select(item) {
            this.payment = item
            this.PayName = item.AccountTypeName
            this.accountType = item.AccountType
            this.$refs.payWay.close()
        },
        cancel() {
            this.$refs.payWay.close()
        },
    },
}
</script>

<style lang="scss">
.container {
    padding: $app-page-padding;
}

.pay-head {
    background: $app-color-main;
    height: 190rpx;
    color: #fff;
    font-size: 36rpx;
    padding: 50rpx 0 0 50rpx;
    font-weight: bold;
    position: relative;
	z-index: 1;
    view {
        position: relative;
        z-index: 1000000000000;
    }
    &:after {
        content: "";
        width: 160%;
        height: 300rpx;
        position: absolute;
        left: -30%; //椭圆左边隐藏10%，右边隐藏10%
        top: 0;
        border-radius: 0 0 50% 50%; //左上角，右上角，右下角，左下角
        background: $app-color-main;
    }
}

.pay-body {
    position: relative;
	z-index: 2;
    margin: $app-page-padding;
    background: #ffffff;
    border-radius: 12rpx 12rpx 0 0;
    padding-bottom: 130rpx;
    .img-item:nth-child(3n + 3) {
        margin-right: 0;
    }
}

.pay-time-price {
    position: relative;
    padding: 0 $app-page-padding;
    height: 168rpx;
    box-shadow: 0px 2rpx 13rpx 0rpx rgba(0, 0, 0, 0.23);
    border-radius: 0 0 12rpx 12rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: -120rpx;

    & > view {
        color: #333;
        font-size: 28rpx;
        margin: 10rpx 0;

        .moneyicon {
            color: #ff0000;
            font-size: 26rpx;
        }

        .strong {
            font-size: 36rpx;
            font-weight: bold;
            color: #ff0000;
        }
    }
}
.bank-info {
    background: #f6f6f6;
    margin: $app-page-padding;
    .bank-info-title {
        font-size: 26rpx;
        font-weight: 500;
        padding: 24rpx;
    }
}
.bank-main {
    border: 1px solid #cccccc;
}
.bank-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    height: 120rpx;
    padding: 0 24rpx;
    border-bottom: 1px solid #eaeaea;
    image {
        width: 65rpx;
        height: 64rpx;
        margin-right: 20rpx;
    }
    .bank-list-name {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}
.bank-text {
    color: #666666;
    font-size: 22rpx;
    line-height: 2;
    padding: 24rpx;
    background: #ffffff;
}
.mobilepay {
    text-align: center;
    image {
        width: 240rpx;
        height: 240rpx;
        display: block;
        margin: 30rpx auto;
    }
}
.flex {
    display: flex;
    justify-content: flex-start;
    padding: 0 24rpx;
    margin-top: -60rpx;
    align-items: center;
    .remark {
        font-size: 24rpx;
        padding: 24rpx;
    }
}
</style>
